<template>
  <div class="product-item" @click="goToProductDetail">
    <el-row type="flex" justify="center">
      <img class="image" :src="productData.image" />
    </el-row>
    <el-row type="flex" justify="center">
      <div class="price">￥{{ productData.price }}</div>
    </el-row>
    <el-row type="flex" justify="center">
      <div class="des">{{ productData.description }}</div>
    </el-row>
    <el-row type="flex" justify="center">
      <div class="comment">{{ productData.comment }}</div>
    </el-row>
    <el-row type="flex" justify="center">
      <div class="tag">
        <el-tag v-if="productData.type == '1'" size="mini" type="danger"
          >自营</el-tag
        >
      </div>
    </el-row>
  </div>
</template>

<script>
import axios from 'axios';
export default {
  name: "ProductItem",
  props: ["productData"],
  methods: {
    // 跳转商品详情
    goToProductDetail: function() {
      console.log(this.productData.id)
      this.$router.push(`/detail/${this.productData.id}`)
    }
  },
  data() {
    return {};
  },
};
</script>

<style scoped>
.product-item {
  width: 25%;
  margin-bottom: 20px;
  padding: 20px 0;
}
.price {
  width: 220px;
  font-size: 22px;
  color: red;
  text-align: left;
  font-weight: 500;
  margin: 5px 0;
}
.image {
  width: 220px;
  height: 220px;
}
.product-item:hover {
  box-shadow: 0 0 5px #66666666;
  cursor: pointer;
  border-radius: 10px;
}
.des {
  width: 220px;
  font-size: 16px;
  text-align: left;
  margin-bottom: 5px;
}
.comment {
  width: 220px;
  font-size: 14px;
  color: #646fb0;
  font-weight: 700;
  text-align: left;
  margin-bottom: 5px;
}
.tag {
  width: 220px;
  text-align: left;
}
</style>
